<template>
  <div class="addProduct-box">
    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
      <el-form-item
        prop="name"
        label="名称"
        :rules="[
      { required: true, message: '请输入名称', trigger: 'blur' },
      // { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
      >
        <el-input v-model="dynamicValidateForm.name"></el-input>
      </el-form-item>
      <el-form-item
        prop="description"
        label="描述"
      >
        <el-input v-model="dynamicValidateForm.description"></el-input>
      </el-form-item>
      <el-form-item
        v-for="(attribute, index) in dynamicValidateForm.attributes"
        :label="'属性' + index"
        :key="attribute.key"
        :prop="'attributes.' + index + '.value'"

      >
        <el-form label-position="right" label-width="80px">
          <el-form-item label="名称">
            <el-input v-model="attribute.name"></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="attribute.type" placeholder="请选择">
            <el-option
            v-for="item in options"
            :key="item.type"
            :label="item.label"
            :value="item.type">
            </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="attribute.description"></el-input>
          </el-form-item>
        </el-form>
        <!--<el-input v-model="attribute.name" size="mini"></el-input>-->
        <!--<el-select v-model="attribute.type" placeholder="请选择">-->
          <!--<el-option-->
            <!--v-for="item in options"-->
            <!--:key="item.type"-->
            <!--:label="item.label"-->
            <!--:value="item.label">-->
          <!--</el-option>-->
        <!--</el-select>-->
        <!--<el-input v-model="attribute.description" size="mini"></el-input>-->
        <el-button @click.prevent="removeDomain(attribute)">删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
        <el-button @click="addAttribute">新增属性</el-button>
        <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>
<script>
  import { getProducts, addProduct, updateProduct,statusProduct,deleteProduct} from '@/api/product'
  export default {
    data() {
      return {
        dynamicValidateForm: {
          attributes: [{
            name: '',
          }],
          name: '',
          description:''
        },
        options: [{
          label: '文本',
          type: 0
        }, {
          label: '数值',
          type: 1
        }, {
          label: '枚举',
          type: 2
        }],
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            addProduct(this.dynamicValidateForm).then(response => {
              this.$router.push({ path: '/device/product'})
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      removeDomain(item) {
        var index = this.dynamicValidateForm.attributes.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.attributes.splice(index, 1)
        }
      },
      addAttribute() {
        this.dynamicValidateForm.attributes.push({
          type: '',
          name:'',
          key: Date.now()
        });
      }
    }
  }
</script>
<style lang="scss">
  .addProduct-box {
    .addProduct {
      padding: 32px;

      .form-div {
        border-top: 1px solid rgba(232, 232, 232, 1);
        padding-top: 32px;
      }

      p {
        text-align: center;
        margin-top: 32px;
      }
    }

    // .bottom{
    //     width: 100%;
    //     height:56px;
    //     background:rgba(255,255,255,1);
    //     box-shadow:0px -1px 2px 0px rgba(0,0,0,0.03);
    //     position: fixed;
    //     right: 0;
    //     bottom: 0;
    //     z-index: 99;
    //     display: flex;
    //     flex-direction: row-reverse;
    //     padding: 12px 32px;
    //     >.ant-btn{
    //         margin-left: 8px;
    //     }
    // }
  }
</style>
<!--<template>-->
<!--<div class="addProduct-box">-->
<!--&lt;!&ndash; 底部白条和按钮0 &ndash;&gt;-->
<!--<div class="bottom">-->
<!--<el-button @click='bottomCancle'>取消</el-button>-->
<!--<el-button type='primary' @click='handleSubmit'>确认</el-button>-->
<!--</div>-->
<!--<content-view>-->
<!--<div class="addProduct bg-white">-->
<!--<el-form-->
<!--ref="form"-->

<!--@submit="handleSubmit"-->
<!--&gt;-->
<!--<el-form-item-->
<!--label=' 产品名称：'-->
<!--:label-col='{span: 8}'-->
<!--:wrapper-col='{span: 9}'-->
<!--&gt;-->
<!--<el-input-->
<!--autocomplete='off'-->
<!--v-decorator="['name', {rules: [{required: true, validator: this.validatorStrLength}]}]"-->
<!--placeholder='请输入产品名称'-->
<!--&gt;-->
<!--</el-input>-->
<!--</el-form-item>-->
<!--<el-form-item-->
<!--label='描述：'-->
<!--:label-col='{span: 8}'-->
<!--:wrapper-col='{span: 9}'-->
<!--&gt;-->
<!--&lt;!&ndash; <el-textarea v-decorator="['desc', {rules: [{validator: validatorTextarea}]}]" placeholder="请输入描述" :rows="4" maxlength='100'/> &ndash;&gt;-->
<!--<div class="textareel-div" tabindex="0" hidefocus="true">-->
<!--<el-textarea @change='changeTip' @focus.native='focusText' @blur.native='blurText' v-decorator="['desc', {rules: [{validator: validatorTextarea}]}]" placeholder="请输入描述" :rows="4" maxlength='100'/>-->
<!--&lt;!&ndash; <textarea name="" id="" cols="30" rows="4"></textarea> &ndash;&gt;-->
<!--<span>{{tip}}/100</span>-->
<!--</div>-->
<!--</el-form-item>-->
<!--&lt;!&ndash;<el-form-item&ndash;&gt;-->
<!--&lt;!&ndash;label=' 联网方式：'&ndash;&gt;-->
<!--&lt;!&ndash;:label-col='{span: 8}'&ndash;&gt;-->
<!--&lt;!&ndash;:wrapper-col='{span: 9}'&ndash;&gt;-->
<!--&lt;!&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;<el-select&ndash;&gt;-->
<!--&lt;!&ndash;v-decorator="['network', {rules: [{required: true, message: '请选择联网方式'}]}]"&ndash;&gt;-->
<!--&lt;!&ndash;placeholder='请选择联网方式'&ndash;&gt;-->
<!--&lt;!&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;<el-select-option value='WIFI'>WI-FI</el-select-option>&ndash;&gt;-->
<!--&lt;!&ndash;<el-select-option value='CELLULAR'>蜂窝(2G/3G/4G)</el-select-option>&ndash;&gt;-->
<!--&lt;!&ndash;<el-select-option value='ETHERNET'>以太网</el-select-option>&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash; <el-select-option value='LORA'>LoRaWAN</el-select-option> &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;<el-select-option value='OTHER'>其他</el-select-option>&ndash;&gt;-->
<!--&lt;!&ndash;</el-select>&ndash;&gt;-->
<!--&lt;!&ndash;</el-form-item>&ndash;&gt;-->
<!--<div class="form-div"-->
<!--v-for="(k, index) in form.getFieldValue('keys')"-->
<!--:key='k.index'-->
<!--&gt;-->
<!--<el-form-item-->
<!--label='扩展字段名称：'-->
<!--:label-col='{span: 8}'-->
<!--:wrapper-col='{span: 12}'-->
<!--&gt;-->
<!--<el-row>-->
<!--<el-col span='18'>-->
<!--<el-input-->
<!--placeholder='请输入扩展字段名称'-->
<!--v-decorator='[`attrName${k.index}`, {rules: [{required: true, pattern: /^[\u4e00-\u9fa5|a-zA-Z|0-9][\u4e00-\u9fa5a-zA-Z0-9_.]{0,29}$/, message: "支持中文、大小写字母、数字、短划线、下划线和小数点，必须以中文、英文或数字开头，不超过30个字符"}]}]'-->
<!--&gt;-->
<!--</el-input>-->
<!--</el-col>-->
<!--<el-col span='4' :offset="1"><a href="javascript:;" @click='remove(k.index)'>删除</a></el-col>-->
<!--</el-row>-->
<!--</el-form-item>-->
<!--<el-form-item-->
<!--label='扩展字段类型：'-->
<!--:label-col='{span: 8}'-->
<!--:wrapper-col='{span: 9}'-->
<!--&gt;-->
<!--<el-select-->
<!--placeholder='请选择扩展字段类型'-->
<!--v-decorator='[`attrType${k.index}`, {rules: [{required: true, message: "请选择扩展字段类型"}]}]'-->
<!--&gt;-->
<!--<el-select-option value='数值'>数值</el-select-option>-->
<!--<el-select-option value='文本'>文本</el-select-option>-->
<!--<el-select-option value='枚举'>枚举</el-select-option>-->
<!--</el-select>-->
<!--</el-form-item>-->
<!--<el-form-item-->
<!--label='枚举定义：'-->
<!--:label-col='{span: 8}'-->
<!--:wrapper-col='{span: 9}'-->
<!--v-if='form.getFieldValue(`attrType${k.index}`) === "枚举"'-->
<!--:help='help'-->
<!--:validateStatus='validateStatus'-->
<!--&gt;-->
<!--<el-row>-->
<!--&lt;!&ndash; <el-col span='12'>-->
<!--<span>-->
<!--参数值&nbsp;-->
<!--<el-tooltip title="支持整型，不超过2个字符">-->
<!--<el-icon type="question-circle-o" />-->
<!--</el-tooltip>-->
<!--</span>-->
<!--</el-col> &ndash;&gt;-->
<!--<el-col span='12'>-->
<!--<span>-->
<!--参数描述&nbsp;-->
<!--<el-tooltip title="必填，支持中文、大小写字母、数字、短划线、下划线和小数点，必须以中文、英文或数字开头，不超过30个字符。">-->
<!--<el-icon type="question-circle-o" />-->
<!--</el-tooltip>-->
<!--</span>-->
<!--</el-col>-->
<!--</el-row>-->
<!--<el-row-->
<!--v-for="(k2) in k.enum"-->
<!--:key="k2"-->
<!--&gt;-->
<!--<el-col span='9'>-->
<!--<el-form-item>-->
<!--<el-input autocomplete='off' placeholder='对该枚举的描述' v-decorator="[`enumDesc${k.index}${k2}`, {rules: [{validator: validatorPro}]}]"></el-input>-->
<!--</el-form-item>-->
<!--</el-col>-->
<!--<el-col span='3' align='center'>-->
<!--<a href="javascript:;"-->
<!--v-if="k.enum.length > 1"-->
<!--:disabled="k.enum.length === 1"-->
<!--@click="() => removeEnum(k.index, k2)"-->
<!--&gt;删除</a>-->
<!--</el-col>-->
<!--</el-row>-->
<!--<el-row v-if='k.enum.length < 25'><el-col span='24'><a href="JavaScript:;" @click='addEnum(index)'>+添加枚举项</a></el-col></el-row>-->
<!--</el-form-item>-->
<!--<el-form-item-->
<!--label='是否必填：'-->
<!--:label-col='{span: 8}'-->
<!--:wrapper-col='{span: 9}'-->
<!--&gt;-->
<!--<el-radio-group v-decorator='[`readonly${k.index}`, {rules: [{required: true, message: "请选择是否必填"}], initialValue: "非必填"}]' :options="plainOptions" defaultValue="非必填" @change='radiosChange'/>-->
<!--</el-form-item>-->
<!--</div>-->
<!--&lt;!&ndash;<p v-show="$route.path.indexOf('editProduct') < 0" v-if="form.getFieldValue('keys').length < 30"><el-button @click='addProperty'>新增扩展字段</el-button></p>&ndash;&gt;-->
<!--</el-form>-->
<!--</div>-->
<!--</content-view>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--// 控制第一个新增-->
<!--let id = 0-->
<!--// 控制第二个新增-->
<!--let id2 = 0-->
<!--export default {-->
<!--name: 'addProduct',-->
<!--data () {-->
<!--return {-->
<!--form: this.$form.createForm(this),-->
<!--plainOptions: ['必填', '非必填'],-->
<!--product: [],-->
<!--account: [],-->
<!--attr: [],-->
<!--tip: 0,-->
<!--validateStatus: '',-->
<!--help: ''-->
<!--}-->
<!--},-->
<!--computed: {-->
<!--},-->
<!--beforeCreate () {-->
<!--// this.form = this.$form.createForm(this);-->
<!--this.form.getFieldDecorator('keys', { initialValue: [], preserve: true });-->
<!--},-->
<!--methods: {-->
<!--validatorStrLength (rule, value, callback) {-->
<!--let reg = /^[\u4e00-\u9fa5|a-zA-Z|0-9][\u4e00-\u9fa5a-zA-Z0-9_.]*$/-->
<!--if (this.computedStrLen(value || '') < 2 || this.computedStrLen(value || '') > 15) {-->
<!--callback('支持中文、英文字母、数字和下划线、长度限制2-15,中文算2位')-->
<!--} else {-->
<!--if (!reg.test(value || '')) {-->
<!--callback('支持中文、英文字母、数字和下划线、长度限制2-15,中文算2位')-->
<!--} else {-->
<!--callback()-->
<!--}-->
<!--}-->
<!--},-->
<!--validatorPro (rule, value, callback) {-->
<!--let reg = /^[\u4e00-\u9fa5|a-zA-Z|0-9][\u4e00-\u9fa5a-zA-Z0-9_.]*$/-->
<!--console.log(this.$utils.computedStrLen(value))-->
<!--if (this.$utils.computedStrLen(value || '') < 1 || this.$utils.computedStrLen(value || '') > 30) {-->
<!--callback('支持中文、大小写字母、数字、短划线、下划线和小数点，必须以中文、英文或数字开头，不超过30个字符')-->
<!--} else {-->
<!--if (!reg.test(value || '')) {-->
<!--callback('支持中文、大小写字母、数字、短划线、下划线和小数点，必须以中文、英文或数字开头，不超过30个字符')-->
<!--} else {-->
<!--callback()-->
<!--}-->
<!--}-->
<!--},-->
<!--// 描述框样式和字数记录-->
<!--focusText () {-->
<!--document.getElementsByClassName('textareel-div')[0].classList.add('focusTextClass')-->
<!--},-->
<!--blurText () {-->
<!--document.getElementsByClassName('textareel-div')[0].classList.remove('focusTextClass')-->
<!--},-->
<!--changeTip (e) {-->
<!--this.tip = e.target.value.length-->
<!--},-->
<!--validatorTextarea (rule, value, callback) {-->
<!--if (String(value).length < 0 || String(value).length > 200) {-->
<!--callback('文本长度0-100')-->
<!--} else {-->
<!--callback()-->
<!--}-->
<!--},-->
<!--validatorStrLength (rule, value, callback) {-->
<!--let reg = /^[\u4e00-\u9fa5a-zA-Z0-9_]+$/-->
<!--if (this.computedStrLen(value || '') < 4 || this.computedStrLen(value || '') > 30) {-->
<!--callback('支持中文、英文字母、数字和下划线、长度限制4-30,中文算2位')-->
<!--} else {-->
<!--if (!reg.test(value || '')) {-->
<!--callback('支持中文、英文字母、数字和下划线、长度限制4-30,中文算2位')-->
<!--} else {-->
<!--callback()-->
<!--}-->
<!--}-->
<!--},-->
<!--//计算字符串长度，英文1个字符，中文2个字符-->
<!--computedStrLen (str) {-->
<!--var len = 0;-->
<!--for (var i = 0; i < str.length; i++) {-->
<!--var c = str.charCodeAt(i);-->
<!--//单字节加1-->
<!--if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {-->
<!--len++;-->
<!--}-->
<!--else {-->
<!--len += 2;-->
<!--}-->
<!--}-->
<!--return len;-->
<!--},-->
<!--selectChange (value) {-->
<!--console.log(value)-->
<!--},-->
<!--addProperty () {-->
<!--id2 = 0-->
<!--const { form } = this;-->
<!--// 初始化是一个空数组-->
<!--const keys = form.getFieldValue('keys');-->
<!--// 构建-->
<!--let obj = {}-->
<!--// 控制扩展字段数-->
<!--obj.index = ++id-->
<!--// 控制当前扩展字段下的枚举数-->
<!--obj.enum = []-->
<!--obj.enum.push(id2)-->
<!--keys.push(obj)-->
<!--const nextKeys = keys-->
<!--console.log(nextKeys)-->
<!--form.setFieldsValue({-->
<!--keys: nextKeys,-->
<!--});-->
<!--},-->
<!--remove (k) {-->
<!--const { form } = this;-->
<!--const keys = form.getFieldValue('keys');-->
<!--console.log(k, keys)-->
<!--if (keys.length === 1) {-->
<!--form.setFieldsValue({-->
<!--keys: [],-->
<!--});-->
<!--} else {-->
<!--const next = keys.filter(item => {-->
<!--return item.index !== k-->
<!--})-->
<!--console.log(next)-->
<!--form.setFieldsValue({-->
<!--keys: next,-->
<!--});-->
<!--}-->
<!--},-->
<!--removeEnum (k1, k2) {-->
<!--const { form } = this;-->
<!--const keys = form.getFieldValue('keys');-->
<!--const newKeys = keys.map(item => {-->
<!--// console.log(k1, k2, item)-->
<!--if (item.index === k1) {-->
<!--// console.log(item.enum.filter(key => key !== k2))-->
<!--item.enum = item.enum.filter(key => key !== k2)-->
<!--// console.log(item.enum)-->
<!--}-->
<!--// console.log(item)-->
<!--return item-->
<!--})-->
<!--// console.log(newKeys)-->
<!--form.setFieldsValue({-->
<!--keys: newKeys-->
<!--});-->
<!--},-->
<!--addEnum (index) {-->
<!--const { form } = this;-->
<!--const keys = form.getFieldValue('keys');-->
<!--keys[index].enum.push(++id2)-->
<!--const newKeys = keys-->
<!--form.setFieldsValue({-->
<!--keys: newKeys-->
<!--});-->
<!--},-->
<!--radiosChange (e) {-->
<!--console.log(e)-->
<!--},-->
<!--handleSubmit () {-->
<!--// 校验失效 手动处理-->
<!--let keys = this.form.getFieldValue('keys')-->
<!--let validatorKeys = ['name', 'user', 'network', 'desc']-->
<!--console.log(keys, keys.length !== 0)-->
<!--if (keys.length !== 0) {-->
<!--keys.map(item => {-->
<!--validatorKeys.push(`attrName${item.index}`)-->
<!--validatorKeys.push(`attrType${item.index}`)-->
<!--validatorKeys.push(`readonly${item.index}`)-->
<!--item.enum && item.enum.map(items => {-->
<!--validatorKeys.push(`enumDesc${item.index}${items}`)-->
<!--})-->
<!--})-->
<!--}-->
<!--this.attr = []-->
<!--this.form.validateFields(validatorKeys, (err, values) => {-->
<!--console.log(err, values)-->
<!--if (!err) {-->
<!--console.log(values)-->
<!--this.form.getFieldValue('keys').length !== 0 && this.form.getFieldValue('keys').map((item, index) => {-->
<!--// 枚举-->
<!--let data = []-->
<!--// 。。-->
<!--let obj = {}-->
<!--obj.name = values['attrName' + item.index]-->
<!--obj.type = values['attrType' + item.index]-->
<!--obj.required = values['readonly' + item.index] === '非必填' ? 0 : 1-->
<!--if (obj.type === '枚举') {-->
<!--item.enum.map((items, indexs) => {-->
<!--let obj = {}-->
<!--// obj['enumNumber' + item.index + '' + items] = values['enumNumber' + item.index + '' + items]-->
<!--obj['enumDesc' + item.index + '' + items] = values['enumDesc' + item.index + '' + items]-->
<!--data.push(obj)-->
<!--})-->
<!--obj.enumData = JSON.stringify(data)-->
<!--}-->
<!--this.attr.push(obj)-->
<!--})-->
<!--this.$api.product.addProduct({-->
<!--body: {-->
<!--"attributeAddReqVos": this.attr,-->
<!--"customerId": values.user,-->
<!--"description": values.desc,-->
<!--"netType": values.network,-->
<!--"productName": values.name-->
<!--}-->
<!--}).then(res => {-->
<!--this.$message.success('新增成功')-->
<!--this.$router.go(-1)-->
<!--})-->
<!--}-->
<!--}).catch(err => {-->
<!--console.log(err)-->
<!--})-->
<!--},-->
<!--bottomCancle () {this.$router.go(-1)}-->
<!--},-->
<!--mounted () {-->
<!--this.$api.product.backCustomerOption().then(res => {-->
<!--this.account = res-->
<!--})-->
<!--},-->
<!--watch: {-->
<!--}-->
<!--}-->
<!--</script>-->
<!--<style lang="scss">-->
<!--.addProduct-box{-->
<!--.addProduct{-->
<!--padding: 32px;-->
<!--.form-div{-->
<!--border-top: 1px solid rgba(232,232,232,1);-->
<!--padding-top: 32px;-->
<!--}-->
<!--p{-->
<!--text-align: center;-->
<!--margin-top: 32px;-->
<!--}-->
<!--}-->
<!--// .bottom{-->
<!--//     width: 100%;-->
<!--//     height:56px;-->
<!--//     background:rgba(255,255,255,1);-->
<!--//     box-shadow:0px -1px 2px 0px rgba(0,0,0,0.03);-->
<!--//     position: fixed;-->
<!--//     right: 0;-->
<!--//     bottom: 0;-->
<!--//     z-index: 99;-->
<!--//     display: flex;-->
<!--//     flex-direction: row-reverse;-->
<!--//     padding: 12px 32px;-->
<!--//     >.ant-btn{-->
<!--//         margin-left: 8px;-->
<!--//     }-->
<!--// }-->
<!--}-->
<!--</style>-->
